<template>
  <view class="container">
		<nav-ber :title="'调研问卷'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="font_wi">
			{{ name }}
		</view>
		<u-divider></u-divider>
		<view class="" style="overflow-x: hidden;overflow-y: scroll;">
			<view class="province"  :style="{'pointer-events': !looks? 'none': 'auto'}">
				<view class="pro_mar" v-for="(item, indexs) in topicList" :key="indexs">
					<view class="text_color">
						{{ indexs+1 + '、' }}{{ item.topic }} {{ item.type != 0? '(不定项选择)' : '' }}
					</view>
					<view v-if="item.type == 0">
						 <u-radio-group
							v-model="item.modexz"
							placement="column"
							@change="groupChange"
							size="25"
							>
							<u-radio
								size="25"
								:customStyle="{marginBottom: '40rpx', fontSize: '45rpx !important'}"
								v-for="(itemMin, index) in item.answerList"
								shape="square"
								:key="itemMin.id"
								:label="itemMin.type+'：'+itemMin.topic"
								:name="itemMin.type"
							>
							</u-radio>
						</u-radio-group>
					</view>
					<view v-if="item.type == 1">
							<u-checkbox-group
							 v-model="item.modexz"
							 placement="column"
							 @change="checkboxChange"
							 size="25"
							 >
								 <u-checkbox
									size="25"
									 :customStyle="{marginBottom: '40rpx', fontSize: '45rpx !important'}"
									 v-for="(itemMin, index) in item.answerList"
									 :key="index"
									 :label="itemMin.type+'：'+itemMin.topic"
									 :name="itemMin.type"
								 >
								 </u-checkbox>
							</u-checkbox-group>
					</view>
				</view>
			</view>
		</view>
		
		<view class="addQues" v-if="looks">
			<u-button type="primary" @click="addFun" text="提交"></u-button>
		</view>
		<!-- <u-modal v-if="show" :show="show" @confirm="confirm" :content='content'></u-modal> -->
  </view>
</template>
<script>
	import { papergetAll, personalPaper, listpaper } from '@/api/mytaskManagement.js'
	import store from '@/store'
  export default {
    data() {
			return {
				show: false,
				content: '',
				topicList: [],
				id: '',
				name: '',
				dyId: '',
				looks: '',
			}
    },
		onLoad(option) {
			this.id = option.id
			if (option.looks == 2) {
				this.looks = false
			} else {
				this.looks = true
			}
			
			this.getActivateFun(option.id)
			if (option.dyId) {
				this.dyId = option.dyId
				
			}
		},
		methods: {
			listpaperFun() {
				listpaper({
					id: this.dyId,
					paperId: this.id
				}).then((res) => {
					this.topicList.forEach((val, index) => {
						if (val.type == 0) {
							val.modexz = res.rows[index].answerType
						} else {
							val.modexz = res.rows[index].answerType.split(',')
						}
					})
					this.$forceUpdate()
				})
			},
			confirm() {
				uni.navigateBack({
					delta: 1,
				})
			},
			addFun() {
				let answerList = []
				let msg = null
				this.topicList.forEach((val) => {
					if (!val.modexz) {
						msg = true
					} else {
						answerList.push({
							answerType: typeof val.modexz == 'object'? val.modexz.join(',') : val.modexz,
							topicId: val.id,
							paperTopicId: val.paperTopicId,
							seq: val.seq
						})
					}
					
				})
				if (msg) {
					uni.showToast({
					  title: '请答完所有题目',
					  icon: "none",
					  duration: 2000
					})
					return
				}
			 store.dispatch('setanswerList', answerList)
			 uni.navigateBack({
				delta: 1,
			 })
				// personalPaper({
				// 	answerList,
				// 	paperId: this.id
				// }).then((res) => {
				// 	this.content = res.msg
				// 	this.show= true
				// })
			},
			getActivateFun(id) {
				papergetAll(id).then((res) => {
					// console.log('fasdf242135', res)
					// this.id = res.data.id
					this.name = res.data.name
					this.topicList = res.data.topicList
					if (this.dyId) {
						this.listpaperFun()
					}
					
				})
			},
			groupChange() {
				console.log('groupChange112', this.listData);
				
			},
			checkboxChange() {
				console.log('1245125', this.listData);
				
			},
		},
		mounted() {
			
		},
  }
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		// margin-top: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.font_wi {
		font-weight: 900;
		text-align: center;
		margin-top: 20rpx;
		font-size: 36rpx;
	}
	.text_color {
		font-weight: 600;
		color: #111;
		margin-bottom: 20rpx;
	}
	.pro_mar {
		margin-bottom: 40rpx;
	}
	.addQues {
		width: 500rpx;
		border-radius: 200rpx;
		margin: auto;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		height: 120rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
</style>
